<template>
    <div class="header">
      <h1 class="header-tt">AI证件照 - {{title}}</h1>
    </div>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
      title: '门店管理',
    }
  },
  mounted() {
    //解决标题恢复初始化问题
    this.updateTitle();
  },
  watch: {
    //路由变化就更新标题
    '$route': 'updateTitle'
  },
  methods: {
    updateTitle() {
       var str = this.$route.path;
      if(str.indexOf('work') != -1 || str == '/home') {
        this.title = '工作台';
      } else if(str.indexOf('order') != -1) {
        this.title = '订单管理';
      } else if(str.indexOf('store') != -1) {
        this.title = '门店管理';
      } else if(str.indexOf('person') != -1){
        this.title = '我的';
      } else {
        this.title = '门店管理';
      }
    }
  }
}
</script>

<style scoped>
  .header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 6.6vh;
    background-color: #1B82D2;
  }
  .header-tt {
    font-size: 3vh;
    font-weight: 400;
    color: #fff;
  }
</style>